<template>
  <div class="wn-index">
    <div class="header">
      <div class="brand">
        <img src="../../assets/images/brand_2.png" alt="brand">
        <img src="../../assets/images/brand_1.png" alt="brand">
      </div>
      <div class="slogan">
        <img src="../../assets/images/slogan.png" alt="slogan">
      </div>
    </div>
    <div class="main">
      <div class="poster">
        <img src="../../assets/images/poster_main.png" alt="poster_main">
      </div>
    </div>
    <div class="footer" :style="{height:tableHeight+'px'}">
      <div class="table">
        <img src="../../assets/images/table.png" alt="table">
      </div>
      <div class="form">
        <div class="button" @click="login">
          <span>立即注册</span>
        </div>
        <div class="sub">
          <p>
            注册即可“免费”开通
            <i @click="poop=true">CEO会员</i>
          </p>
          <p>享线上线下卖货赚钱</p>
        </div>
      </div>
    </div>
    <div class="poop" v-show="poop">
      <div class="shadow" @click="poop=false"></div>
      <div class="inner">
        <h1></h1>
        <ul>
          <li v-for="(item, index) in poopInfo" :key="index">
            <h5>{{item.tit}}</h5>
            <p>{{item.con}}</p>
          </li>
        </ul>
        <div class="close" @click="poop=false">x</div>
      </div>
    </div>
    <div class="texture"></div>
  </div>
</template>

<script>
import store from '../../store.js'
import axios from "axios"
export default {
  data () {
    return {
      tableHeight: 300,
      poop: false,
      poopInfo: [{
        tit: '购物优惠',
        con: '旺仔旺铺200+品项随心选，净省5%-20%'
      }, {
        tit: '低价箱购',
        con: '箱购专区6.5折起，成功推广即可赚最高35%的奖励金'
      }, {
        tit: '分享赚钱',
        con: '商品一键分享，完成订单即可赚5%-20%的奖励金'
      }, {
        tit: '邀请有奖',
        con: '邀请好友开通CEO会员，还可获得好友 推广订单金额1%-3%的奖励金'
      }]
    }
  },
  methods: {
    watchWindowResize () {
      this.computedTableHeight()
    },
    getRealOffsetTop (e) {
      if (e.parentElement) {
        return this.getRealOffsetTop(e.parentElement) + e.offsetTop
      }
      return e.offsetTop
    },
    computedTableHeight () {
      let dom = document.querySelector('.poster')
      if (dom) {
        let domFooter = dom.offsetHeight * 0.85 + this.getRealOffsetTop(dom)
        if (document.body.offsetHeight >= 550) {
          this.tableHeight = document.body.offsetHeight - domFooter
        } else {
          this.tableHeight = 550 - domFooter
        }
      }
    },
    login () {
      store.commit('upload', { prope: 'flow', data: true })
    }
  },
  mounted () {
    window.onresize = this.watchWindowResize
    document.querySelector('.poster img').onload = () => {
      store.commit('upload', { prope: 'loaded', data: true })
      this.computedTableHeight()
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '../../assets/styles/index.styl'
.wn-index {
  height 100%
  width 100%
  background #000
  background linear-gradient(135deg, #fc556c, #f167ef)
  overflow-x hidden
  position relative
  .header {
    position relative
    z-index 1
    .brand {
      background #fff
      display inline-block
      position absolute
      right 15px
      top 0
      border-bottom-left-radius 5px
      border-bottom-right-radius 5px
      padding 3px 5px
      &:before, &:after {
        position absolute
        top 0
        bottom 0
        right 0
        left 0
        background #fff
        content ''
        display inline-block
        z-index 2
        border-bottom-left-radius 5px
        border-bottom-right-radius 5px
      }
      &:after {
        z-index 1
        filter blur(5px)
        background #691e40
        transform-origin center bottom
        transform scaleX(0.93) scaleY(0.8)
        opacity 0.7
      }
      img {
        position relative
        z-index 3
        height 32px
        width auto
        margin 3px
        @media only screen and (max-height: BPH0) {
          height 22px
        }
        @media only screen and (max-height: BPH1) {
          height 28px
        }
      }
    }
    .slogan {
      padding-top 50px
      @media only screen and (max-height: BPH0) {
        padding-top 15px
      }
      @media only screen and (max-height: BPH1) {
        padding-top 20px
      }
      text-align center
      img {
        width 92%
      }
    }
  }
  .main {
    position relative
    z-index 1
    .poster {
      margin 15px 0
    }
  }
  .footer {
    height 42%
    width 100%
    position absolute
    bottom 0
    z-index 2
    .table {
      position absolute
      bottom 0
      background linear-gradient(to bottom, #f84055, #fea778)
      height 100%
      &:before {
        content ''
        display inline-block
        top 0
        bottom 0
        left 0
        right 0
        position absolute
        background-image url('../../assets/images/table_texture.png')
        background-size 20%
      }
      img {
        position relative
        top 0
        transform translateY(-99%)
        left 0
      }
    }
    .form {
      position relative
      z-index 3
      top 45%
      transform translateY(-50%)
      text-align center
      .button {
        background-image url('../../assets/images/button.png')
        height 80px
        @media only screen and (max-height: BPH0) {
          height 60px
        }
        @media only screen and (max-height: BPH1) {
          height 70px
        }
        background-size contain
        background-repeat no-repeat
        background-position center
        display inline-block
        width 80%
        text-align center
        span {
          position relative
          top 25%
          transform translateY(-50%)
          font-size 20px
          color #fff
        }
      }
      .sub {
        font-size 14px
        position relative
        @media only screen and (max-height: BPH0) {
          font-size 12px
          transform scale(0.8)
          top -10px
        }
        @media only screen and (max-height: BPH1) {
          top -5px
          font-size 12px
          transform scale(0.9)
        }
        p {
          color c1
          position relative
          left -5px
          i {
            cursor pointer
            color #fff
            position relative
            &:before {
              display inline-block
              content '?'
              position absolute
              height 14px
              width 14px
              border-radius 50%
              background rgba(255, 255, 255, 0.3)
              color #fff
              font-size 12px
              right -16px
              top 50%
              transform translateY(-55%)
            }
          }
        }
      }
    }
  }
  .poop {
    .shadow {
      display inline-block
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      background rgba(0, 0, 0, 0.5)
      z-index 99
    }
    .inner {
      position absolute
      z-index 100
      top 45%
      left 50%
      transform translate(-50%, -50%)
      background #fff
      border-radius 5px
      width 65%
      box-shadow 0 1px 3px rgba(26, 26, 26, 0.1)
      h1 {
        padding 15px
        font-size 18px
        color #fff
        text-align center
        background-image url('../../assets/images/poop_head.jpg')
        background-size cover
        height 60px
        line-height 60px
        border-top-left-radius 5px
        border-top-right-radius 5px
      }
      ul {
        padding 15px
        font-size 14px
        li {
          padding-left 5px
          margin-bottom 10px
          h5 {
            font-size 14px
            color #FC556C
            position relative
            &:before {
              content ''
              display inline-block
              height 4px
              width 4px
              background #FC556C
              position absolute
              border-radius 50%
              top 50%
              transform translateY(-50%) translateX(-200%)
            }
          }
          p {
            font-size 12px
            color #666
          }
        }
      }
      .close {
        width 40px
        position absolute
        top 0px
        right 0px
        color #fff
        font-size 24px
        text-align center
        z-index 99
      }
    }
  }
  .texture {
    z-index 0
    height 80%
    width 80%
    background rgba(255, 255, 255, 0.1)
    background linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))
    border-radius 15px
    position absolute
    top 110px
    left 15px
    &:before {
      content ''
      display inline-block
      height 40%
      width 40%
      background linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0))
      position absolute
      top -50px
      left 50px
    }
  }
}
</style>